{% extends "learning/base.html" %}

{% block title %}公共笔记{% endblock %}

{% block content %}
<section style="margin-bottom:2rem;">
    <h2 style="margin:0 0 0.5rem 0;font-size:2.25rem;font-weight:800;letter-spacing:-0.02em;">公共笔记</h2>
    <p style="margin:0;color:var(--text-secondary);font-size:0.95rem;max-width:720px;">
        展示经过老师审核的优秀学习笔记，向同学们分享解题思路与方法总结。你也可以在自己的笔记本中提交审核，共同打造优质的学习资料库。
    </p>
</section>

{% if public_entries %}
<div class="mistake-feed">
    {% for entry in public_entries %}
    <article class="feed-item">
        <div class="feed-header">
            <h3 class="feed-title" style="margin:0;">
                <a href="{{ entry.get_absolute_url }}" style="color:inherit;text-decoration:none;">
                    {{ entry.title }}
                </a>
            </h3>
            <span class="pill success">公开</span>
        </div>
        <div class="feed-meta">
            <span>👤 {{ entry.student.username }}</span>
            <span>📅 发布于 {{ entry.published_at|date:"Y-m-d" }}</span>
            <span>🔗 关联错题 {{ entry.related_mistakes.all|length }}</span>
        </div>
        <p style="margin:0.75rem 0 0;color:var(--text-secondary);font-size:0.95rem;line-height:1.6;">
            {{ entry.content|striptags|truncatechars:200 }}
        </p>
        <div class="action-group" style="margin-top:0.75rem;">
            <a class="button small secondary" href="{{ entry.get_absolute_url }}">查看详情</a>
        </div>
    </article>
    {% endfor %}
</div>

{% if is_paginated %}
<nav style="margin-top:2rem;display:flex;justify-content:center;gap:0.75rem;align-items:center;">
    {% if page_obj.has_previous %}
        <a class="button small secondary" href="?page={{ page_obj.previous_page_number }}">上一页</a>
    {% else %}
        <span class="pill">第一页</span>
    {% endif %}
    <span class="pill">{{ page_obj.number }} / {{ page_obj.paginator.num_pages }}</span>
    {% if page_obj.has_next %}
        <a class="button small secondary" href="?page={{ page_obj.next_page_number }}">下一页</a>
    {% else %}
        <span class="pill">最后一页</span>
    {% endif %}
</nav>
{% endif %}
{% else %}
<section class="card" style="text-align:center;padding:3rem 1rem;">
    <div style="font-size:3rem;margin-bottom:1rem;opacity:0.3;">📚</div>
    <p style="margin:0 0 1.5rem 0;color:var(--text-secondary);font-size:1.05rem;">
        暂无公开笔记。鼓励同学们提交优秀内容，我们会在这里展示！
    </p>
</section>
{% endif %}
{% endblock %}
